<template>
   <div class="ratingselect">
   <div class="underline">
   	<div class="rating-type">
   		<span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}">{{desc.all}}
   		<span  class="count">{{ratings.length}}</span></span>
   		<span  @click="select(0,$event)" class="block positive" :class="{'active':selectType===0}">{{desc.positive}}
   		<span class="count">{{positives.length}}</span></span>
   		<span  @click="select(1,$event)" class="block positive" :class="{'active':selectType===1}">{{desc.negative}}
   		<span class="count">{{negatives.length}}</span></span>
   	</div>
   	</div>
   	<div class="switch" :class="{'on':onlyContent}" @click="toggleContent">
   		<i class="iconfont icon-gou3-copy"></i>
   		<span class="text">只看有内容的评价</span>
   	</div>
   </div> 
</template>

<script type="ecmascript-6">
const POSITIVE=0;
const NEGATIVE=1;
const ALL=2;
export default{
	props:{
		ratings:{
			type:Array,
			default(){
				return [];
			}
		},
		selectType:{
			type:Number,
			default:ALL
		},
		onlyContent:{
			type:Boolean,
			default:false
		},
		desc:{
			type:Object,
			default(){
				return{
					all:'全部',
					positive:'满意',
					negative:'不满意'
				};
			}
		}
	},
	methods:{
		select(type,event){
			this.$emit('select',type);
		},
		toggleContent(event){
			this.$emit('toggle');
		}
	},
  name:'',
  computed:{
  	positives(){
  		return this.ratings.filter((rating)=>{
  			return rating.rateType===POSITIVE;
  		})
  	},
  	negatives(){
  		return this.ratings.filter((rating)=>{
  			return rating.rateType===NEGATIVE;
  		})
  	}
  },
  data(){ return{}},
  components:{}
}
</script>

<style rel="stylesheet" lang="less">
    .ratingselect{
    	.rating-type{
    		padding: 0.5rem 0.9rem;
    		position: relative;
    		font-size: 0;
    	}
    	.block{
    		display: inline-block;
    		padding: 0.4rem 0.6rem;
    		margin-right: 0.4rem;
    		line-height: 0.8rem;
    		border-radius: 0.05rem;
    		font-size: 0.6rem;
    		color: #4d555d;
    	}
    	.block.active{
    		color: #fff;
    	}
    	.positive{
    		background-color: rgba(0,160,220,0.2);
    	}
    	.positive.active{
    		    background: #00a0dc;
    	}
    	.negative{
    		background-color: rgba(77,85,93,0.2);
    	}
    	.negative.active{
    		background: #4d555d;
    	}
    	.switch{
    		padding: 0.6rem 0.9rem;
    		line-height: 1.2rem;
    		border-bottom: 1px solid rgba(7,17,27,0.1);
    		color: #93999f;
    		font-size: 0;
    	}
    	.icon-gou3-copy{
    		display: inline-block;
    		vertical-align: top;
    		margin-right: 0.2rem;
    		font-size: 24px;
    	}
    	.on .icon-gou3-copy{
    		color: #00c850;
    	}
    	.text{
    		display: inline-block;
    		vertical-align: top;
    		font-size: 12px;
    	}
    }
</style>